<template>
  <up-loading-page v-if="loading" :loading="loading" loading-text="努力加载中..." font-size="48" iconSize="56"></up-loading-page>
  <view class="wrap" v-else>
    <view v-for="item in list" :key="item.id" class="item" @click="goDetail(item)">
      <view class="image">
        <u-image height="calc((100vw - 90rpx) / 2)" width="calc((100vw - 90rpx) / 2)" :src="item.cover" :lazy-load="true" mode="aspectFit"></u-image>
      </view>
      <up-text type="" color="#000" size="28" margin="30rpx" :text="item.title" align="center"></up-text>
    </view>
  </view>
  <up-modal :show="show" title="正在播放" confirmText="暂停" @confirm="destroyVoice">
    <up-loading-icon v-if="loadAudio" size="64"></up-loading-icon>
    <image v-else src="../../static/playAudio.gif" style="width: 60vw; height: 24vw"/>
  </up-modal>
</template>

<script>
import { materialTypeEnum } from '@/utils/common'
import { queryMaterialByType } from '@/services/material';

let innerAudioContext;

export default {
  data() {
    return {
      list: [],
      loading: true,
      type: '',
      show: false,
      loadAudio: false,
    }
  },
  onLoad(option) {
    const _that = this;
    const {type} = option || {};
    this.type = type;
    uni.setNavigationBarTitle({ title: materialTypeEnum[type] })
    queryMaterialByType({type}).then((res) => {
      console.log('queryMaterialByType', res)
      const { success, data } = res || {};
      if (success) {
        this.list = data;
      }
    }).finally(() => {
      _that.loading = false;
    })
  },
  onHide() {
    if (innerAudioContext) {
      innerAudioContext.pause();
      innerAudioContext.stop();
      this.show = false;
    }
  },
  onUnload() {
    this.destroyVoice();
  },
  methods: {
    destroyVoice() {
      console.log('innerAudioContext', innerAudioContext)
      if (innerAudioContext) {
        try {
          innerAudioContext.pause();
          innerAudioContext.stop();
          this.show = false;
          innerAudioContext.offPlay(() => {});
          innerAudioContext.offStop(() => {});
          innerAudioContext.offEnded(() => {});
          innerAudioContext.offError(() => {});
          innerAudioContext = null;
        } catch (e) {
          //TODO handle the exception
          console.log('destroyVoice_error', JSON.stringify(e))
        }
      }
    },
    hechengAudio(url) {
      const _that = this;
      this.show = true;
      innerAudioContext = uni.createInnerAudioContext();
      innerAudioContext.obeyMuteSwitch = false;
      this.loadAudio = true;
      innerAudioContext.onPlay(() => {
        console.log('开始播放')
        _that.show = true;
        _that.loadAudio = false;
      })
      innerAudioContext.onStop(() => {
        console.log('i am onStop')
        _that.show = false;
        _that.loadAudio = false;
      })
      innerAudioContext.onEnded(() => {
        console.log('i am onEnded')
        //播放结束，销毁该实例
        innerAudioContext.stop()
        console.log('已执行destory()')
        _that.show = false;
      })
      innerAudioContext.onError((res) => {
        console.log('innerAudioContext_error', res.errMsg)
        console.log('innerAudioContext_error', res.errCode)
        uni.$u.toast('播放失败');
        innerAudioContext.stop();
        _that.show = false;
        _that.loadAudio = false;
      })
      console.log('innerAudioContext', innerAudioContext);
      innerAudioContext.src = url;
      innerAudioContext.seek(0);
      innerAudioContext.play();
    },
    goDetail(detail) {
      console.log('goDetail', detail);
      const { fileType, content } = detail || {};
      if (`${fileType}` === '3') {
        this.destroyVoice();
        this.hechengAudio(content);
      } else {
        uni.navigateTo({
          url: '/pages/material/detail',
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('detail', {
              data: detail,
            })
          }
        })
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  min-height: 100vh;
  padding: 30rpx 30rpx 0;
  background-color: #f2f2f2;
}

.item:nth-child(2n) {
  margin-right: 0;
}

.item {
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 30rpx;
  background-color: #fff;
  overflow: hidden;
  width: calc((100vw - 90rpx) / 2);
  margin-right: 30rpx;
}

.image {
  width: calc((100vw - 90rpx) / 2);
  height: calc((100vw - 90rpx) / 2);
}
</style>
